<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>发牌</title>
    <style>
        ol>img:not(:first-child) {
            width: 105px;
            height: 150px;
            border-radius: 5px;
            margin-left: -60px;
        }
    </style>
</head>

<body>
    <div id="box">
        <div id="one">
            <h3>一号玩家</h3>
            <ol></ol>
        </div>
        <div id="two">
            <h3>二号玩家</h3>
            <ol></ol>
        </div>
        <div id="three">
            <h3>三号玩家</h3>
            <ol></ol>
        </div>
        <div id="more">
            <h3>底牌</h3>
            <ol></ol>
        </div>
    </div>
    <script>
        let one = document.querySelector('#one>ol')
        let two = document.querySelector('#two>ol')
        let three = document.querySelector('#three>ol');
        let more = document.querySelector('#more>ol');
        const number = ['3', '4', '5', '6', '7', '8', '9', '10', "J", "Q", "K", "A", '2'];
        const flower = ["♠️", "♥️", "♣️", "♦️"]; // 黑桃 < 红心 < 梅花 < 方块

        let arr = [];
        let z = 1;
        for (let i = 0; i < number.length; i++) {
            for (let j = flower.length; j >= 0; j--) {
                arr.push({
                    str: number[i] + flower[j],
                    number: i,
                    flower: j,
                    img: z++,
                });
                // consolef.log(arr);
            }
        }

        arr.push({
            str: '小鬼',
            number: 13,
            flower: 5,
            img: 53,
        }, {
            str: '大鬼',
            number: 13,
            flower: 6,
            img: 54,
        });
        // console.log(arr);
        let s = new Set();
        while (s.size < 54) {
            s.add(random(1, 54));
        }
        let arr2 = [...s];
        // console.log(arr2);
        let arr4 = arr2.map((item) => arr[item - 1]);
        console.log(arr4);
        // console.log(arr3);
        let players_one = arr4.slice(0, 17);
        let players_two = arr4.slice(17, 34);
        let players_three = arr4.slice(34, 51);
        let def = arr4.splice(51, 54);
        // console.log(players_one);
        // console.log(players_one, players_two, players_three, def);
        function pokershummer(arr) {
            let poker = arr.sort((a, b) => {
                if (a.number == b.number) {
                    return a.flower - b.flower
                } else {
                    return a.number - b.number;
                }
            });
            return poker;

        }
        players_one = pokershummer(players_one) //链式函数
        players_two = pokershummer(players_two)
        players_three = pokershummer(players_three)
        def = pokershummer(def)


        console.log('第一个的牌', players_one, players_one.length);
        console.log('第二个的牌', players_two, players_two.length);
        console.log('第三个的牌', players_three, players_three.length);
        console.log(def);


        one.innerHTML = players_one.map((item) => `<img src="./pokerImg/pkp_${item.img}.jpg">`).join('');
        two.innerHTML = players_two.map((item) => `<img src="./pokerImg/pkp_${item.img}.jpg">`).join('');
        three.innerHTML = players_three.map((item) => `<img src="./pokerImg/pkp_${item.img}.jpg">`).join('');
        more.innerHTML = def.map((item) => `<img src="./pokerImg/pkp_${item.img}.jpg">`).join('');

        // 随机数装封
        function random(min, max) {
            if (!max) {
                [max, min] = [min, 0];
            }
            let number = parseInt(Math.random(min, max) * (max - min + 1) + min);
            return number;
        }
    </script>
</body>

</html>